<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <b-card header="<i class='fa fa-align-justify'></i> RFI信息">
          <div class="search-box">
            <input type="text" class="form-control" placeholder="公司名" v-model="companyName">
            <b-button variant="outline-primary" @click="searchRif()">搜索</b-button>
            <br><br>
            <b-button variant="outline-primary" @click="exportExcel()">导出excel</b-button>
            <!--<a class="btn btn-outline-primary" variant="outline-primary" href="http://101.37.117.111:8080/takigenApi/outPutCompany" target="_blank">导出excel</a>-->
            <iframe v-show="isSrc" :src="src"></iframe>
          </div>
          <div class="table-box">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>公司名称</th>
                  <th>部门名称</th>
                  <th>邮政编码</th>
                  <th>地址</th>
                  <th>电话</th>
                  <th>申请时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="8" v-show="isRfi" style="text-align: center;">没有搜索到匹配的信息!</td>
                </tr>
                <tr v-for="(item, index) in currentData" :key="index">
                  <td>{{ index + 1 + number }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.companyName }}</td>
                  <td>{{ item.deptName }}</td>
                  <td>{{ item.postcode }}</td>
                  <td>{{ item.address }}</td>
                  <td>{{ item.tel }}</td>
                  <td>{{ item.createdate.substr(0, 10)}}</td>
                  <td>
                    <span class="badge badge-success" @click="lookRfi(item.id)">详情</span>
                    <span class="badge badge-success" @click="findQuote(item.cid)">报价详情</span>
                    <span class="badge badge-danger" @click="deleteRfi(item.cid)">删除</span>
                    <span class="badge badge-primary" variant="primary" @click="contract(item.id,item.cid)">
                      合同书
                    </span>
                    <!--<a class="badge badge-primary" variant="primary" @click="contract(item.id,item.cid)" :href="hrefs" target="_blank">合同书</a>-->
                  </td>
                </tr>
                <iframe v-show="isSrc" :src="src2"></iframe>
              </tbody>
            </table>
          </div>
          <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :current-page.sync="current" :page-size="10" :total="total">
          </el-pagination>
        </b-card>
      </div>
    </div>

    <div title="Modal title" class="modal-primary" v-model="primaryModal" v-show="primaryModal">
      <span class="modal-open">
        <div class="modal fade show" role="dialog">
          <div class="modal-dialog modal-md">
            <div tabindex="-1" role="document" class="modal-content">
              <header class="modal-header">
                <h5 class="modal-title">删除信息</h5>
                <button type="button" aria-label="Close" class="close" @click="cancelModal()">
                  <span aria-hidden="true">×</span>
                </button>
              </header>
              <div class="modal-body">
                <br>是否删除该条RFI信息？<br><br>
              </div>
              <footer class="modal-footer">
                <button type="button" class="btn btn-primary btn-md" @click="cancelModal()">取消</button>
                <button type="button" class="btn btn-danger btn-md" @click="sureDeleteRfi()">确认</button>
              </footer>
            </div>
          </div>
        </div>
        <div class="modal-backdrop fade show"></div>
      </span>
    </div>

  </div>

</template>

<script>
  import { findCompanyRif, deleteCompany, likeCompany } from '../../service/api'
  import _ from 'lodash'
  export default {
    name: 'tables',
    data () {
      return {
        current: 1,
        number: 0,
        rfiList: [],
        pageNumber: '',
        companyName: '',
        isRfi: false,
        primaryModal: false,
        isSrc: false,
        delId: '',
        src: '',
        src2: '',
        hrefs: ''
      }
    },
    computed: {
      currentData () {
        return this.rfiList[this.current - 1]
      },
      total () {
        // return this.rfiList.length
        return ~~this.pageNumber
      }
    },
    methods: {
      // 关闭浮层
      cancelModal () {
        this.primaryModal = false
      },
      // 查看该条RFI信息详情
      lookRfi (index) {
        this.$router.push({
          path: '/information/rfi_detail?id=' + index
        })
      },
      // 查看该条RFI报价详情
      findQuote (index) {
        this.$router.push({
          path: '/information/rfi_quote?id=' + index
        })
      },
      // 打开删除浮层
      deleteRfi (index) {
        this.delId = index
        this.primaryModal = true
      },
      // 确认删除该条RFI信息
      sureDeleteRfi () {
        console.log(this.delId)
        deleteCompany({ id: this.delId })
          .then(({ data, err }) => {
            console.log('err: ' + err)
            console.log('data: ' + data)
            if (data.code === 200) {
              this.primaryModal = false
              alert('删除成功!')
              location.reload()
            }
          })
      },
      // 搜索某条RFI信息
      searchRif () {
        console.log('companyName: ' + this.companyName)
        if (this.companyName === '' || !this.companyName.trim()) {
          alert('搜索内容不能为空!')
        } else {
          likeCompany({ name: this.companyName })
            .then(({ data, err }) => {
              console.log('err: ' + err)
              console.log('data: ' + data)
              if (data.code === 200) {
                this.pageNumber = data.result.length
                this.current = 1
                this.rfiList = _.chunk(data.result, 10)
                if (data.result.length === 0) {
                  this.isRfi = true
                } else {
                  this.isRfi = false
                }
              }
            })
        }
      },
      handleCurrentChange () {
        console.log('handleCurrentChange: ' + this.current)
        if (this.current === 1) {
          this.number = 0
        } else {
          this.number = (this.current - 1) * 10
        }
      },
      exportExcel () {
        this.src = 'https://www.takigen.cn/takigenApi/outPutCompany?time=' + new Date().getTime()
      },
      contract (id, cid) {
        this.src2 = 'https://www.takigen.cn/takigenApi/inputRfiExcel?id=' + cid + '&cid=' + id + '&time=' + new Date().getTime()
        // this.hrefs = 'http://101.37.117.111:8080/takigenApi/inputRfiExcel?id=' + cid + '&cid=' + id
      }
    },
    created () {
      // fetch
      findCompanyRif()
        .then(({ data, err }) => {
          if (data.code === 200) {
            this.pageNumber = data.result.length
            this.rfiList = _.chunk(data.result.reverse(), 10)
            if (data.result.length === 0) {
              this.isRfi = true
            } else {
              this.isRfi = false
            }
          }
        })
    }
  }
</script>
<style type="text/scss" rel="stylesheet/scss" lang="scss" scoped>
  @import '../../styles/common';
</style>
